<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图表</title>

    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>

    <!-- 引入样式 -->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="css/element-ui.css">

    <!-- 引入组件库 -->
    <script src="js/element-ui.js"></script>

    <!--引入echarts-->
    <script src="js/echarts.js"></script>

    <style>
        .btn {
            height: 40px;
            border-radius: 0 45%;
            background-color: #2ab7ec;
            box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e;
            cursor: pointer;
        }

        .btn:active {

            transform: scale(0.98);

            box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
        }

        .ribbon {
            display: inline-block;
            width: 48%;
            position: relative;
            float: left;
            margin-bottom: 30px;
            /* background: url(); */
            /*background-color: antiquewhite;*/
            background-size: cover;
            text-transform: uppercase;
            color: white;
        }

        .ribbon:nth-child(even) {
            margin-right: 4%;
        }

        @media (max-width: 800px) {
            .ribbon {
                width: 100%
            }

            .ribbon:nth-child(even) {
                margin-right: 0%;
            }
        }

        .ribbon1 {
            position: absolute;
            top: -8px;
            right: 10px;
        }

        .ribbon1:after {
            position: absolute;
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-top: 10px solid #f8463f;
            border-left: 66px solid transparent;
            border-right: 66px solid transparent;
        }

        .ribbon1 span {
            position: relative;
            display: inline-block;
            text-align: center;
            background: #F8463F;
            font-size: 14px;
            line-height: 1;
            padding: 12px 8px 10px;
            border-top-right-radius: 8px;
            width: 180px;
        }

        .ribbon1 span:before, .ribbon1 span:after {
            position: absolute;
            content: "";
            display: block;
        }

        .ribbon1 span:before {
            background: #F8463F;
            height: 6px;
            width: 6px;
            left: -6px;
            top: 0;
        }

        .ribbon1 span:after {
            background: #C02031;
            height: 6px;
            width: 8px;
            border-radius: 8px 8px 0 0;
            left: -8px;
            top: 0;
        }

        .hcqFont {
            position: relative;
            letter-spacing: .07em;
            font-size: 1.5em;
            font-weight: normal;
            margin: 0 auto
        }

        .hcqFont:before, .hcqFont:after {
            position: absolute;
            top: 0;
            left: 0;
            right: 0
        }

        .hcqStyle2 {
            display: inline-block;
            font-weight: bold;
            color: #def;
            text-shadow: 0 0 1px currentColor, -1px -1px 1px #000, 0 -1px 1px #000, 1px -1px 1px #000, 1px 0 1px #000, 1px 1px 1px #000, 0 1px 1px #000, -1px 1px 1px #000, -1px 0 1px #000;
            -webkit-filter: url(#diff1);
            filter: url(#diff1); /*background:#def;padding:0 .2em*/
        }


    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="4" :offset="6">
            <div class="ribbon"><span class="ribbon1"><span><h3
                    class='hcqFont hcqStyle2'>{{this.address}}</h3></span></span></div>
        </el-col>
        <el-col :span="2">
            <template v-if="showUpload!=address">
                <el-button icon="el-icon-loading" circle style="background-color:#E9EEF3;border: none;font-size: 30px"></el-button>
            </template>
        </el-col>

        <el-col :span="8" :offset="4">
            <el-row>
                <el-col :span="16">
                    <el-select v-model="address" filterable placeholder="请选择地址" :filter-method="getData()">
                        <el-option
                                v-for="item in allAddress"
                                :key="item.value"
                                :label="item.text"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <button @click="on()" class="btn">刷新数据</button>
                </el-col>
            </el-row>
        </el-col>
    </el-row>


    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main01" style="height: 300px"></div>
    <div id="main02" style=" height: 300px"></div>
    <div id="main03" style=" height: 300px"></div>
    <div id="main04" style=" height: 300px"></div>
    <div id="main05" style=" height: 300px"></div>
    <div id="main06" style=" height: 300px"></div>

</div>

<script type="text/javascript">

    new Vue({
        el: '#app',
        data: {
            showUpload: '', /*true:显示刷新图标，false：显示缓冲图标*/
            allAddress: [{}],
            address: null,
            chartInstance01: null,
            chartInstance02: null,
            chartInstance03: null,
            chartInstance04: null,
            chartInstance05: null,
            chartInstance06: null,
            allData: null
        },
        methods: {
            initEcharts() {
                // 基于准备好的dom，初始化echarts实例
                this.chartInstance01 = echarts.init(document.getElementById('main01'));
                this.chartInstance02 = echarts.init(document.getElementById('main02'));
                this.chartInstance03 = echarts.init(document.getElementById('main03'));
                this.chartInstance04 = echarts.init(document.getElementById('main04'));
                this.chartInstance05 = echarts.init(document.getElementById('main05'));
                this.chartInstance06 = echarts.init(document.getElementById('main06'));
            },
            /*获取所有不重复地址*/
            getAllAddress() {
                const objApp = this;
                axios.get("/details/getAllAddress").then(function (resp) {
                    const json = resp.data;
                    if (json.code == 2000) {
                        objApp.allAddress = json.data;
                        /*把最新的地址给默认下拉选中*/
                        objApp.address = objApp.allAddress[objApp.allAddress.length - 1].value;
                        /*获取数据*/
                        // objApp.showUpload = 0;
                    } else {
                        console.error(json)
                    }
                });
            },

            //获取后台数据
            getData() {
                const objApp = this;
                // objApp.showUpload = 1;
                /*当地址不为空时才向服务器请求数据*/
                if (objApp.address != null) {
                    // objApp.showUpload = 1;
                    axios.get('/mqtt/getData?address=' + objApp.address)
                        .then(function (res) {
                            const json = res.data;
                            if (json.code == 2000) {
                                objApp.allData = json.data;
                                objApp.updateCart();
                                /*显示刷新图标*/
                                objApp.showUpload = objApp.address;
                                console.log("显示："+objApp.showUpload);
                            }
                        })
                }
            },
            updateCart() {
                //得到temperature的数组
                const temperature = this.allData.map((item) => {
                    return item.temperature;
                });

                const time = this.allData.map((item) => {
                    return item.time.substring(8, 19);
                });
                const humidity = this.allData.map((item) => {
                    return item.humidity;
                });
                const smokeValue = this.allData.map((item) => {
                    return item.smokeValue;
                });
                const wvalue = this.allData.map((item) => {
                    return item.wvalue;
                });
                const avalue = this.allData.map((item) => {
                    return item.avalue;
                });
                const vvalue = this.allData.map((item) => {
                    return item.vvalue;
                });

                //温度
                const option01 = {
                    animationDuration: 1000,
                    title: {
                        text: '温度曲线图（℃）'
                    },
                    xAxis: {
                        type: 'category',
                        data: time
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} ℃',
                            align: 'center'
                        }
                    },
                    series: [
                        {
                            name: '温度',
                            data: temperature,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: '#D44024',
                                // opacity: 0.3/*透明度*/
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                };

                //湿度
                const option02 = {
                    title: {
                        text: '湿度曲线图（RH）'
                    },
                    xAxis: {
                        type: 'category',
                        data: time
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} RH',
                            align: 'center'
                        }
                    },
                    series: [
                        {
                            data: humidity,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: '#2B92B8',
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                };

                //烟雾
                const option03 = {
                    title: {
                        text: '烟雾曲线图（ppm）'
                    },
                    xAxis: {
                        type: 'category',
                        data: time
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} ppm',
                            align: 'center'
                        }
                    },
                    series: [
                        {
                            data: smokeValue,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: '#465569',
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                };

                //水压
                const option04 = {
                    title: {
                        text: '水压曲线图（Pa）'
                    },
                    xAxis: {
                        type: 'category',
                        data: time
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} Pa',
                            align: 'center'
                        }
                    },
                    series: [
                        {
                            data: wvalue,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: '#459B83',
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                };

                //电流
                const option05 = {
                    title: {
                        text: '电流曲线图（A）'
                    },
                    xAxis: {
                        type: 'category',
                        data: time
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} A',
                            align: 'center'
                        }
                    },
                    series: [
                        {
                            data: avalue,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: '#A7BF47',
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                };

                //电压
                const option06 = {
                    title: {
                        text: '电压曲线图（V）'
                    },
                    xAxis: {
                        type: 'category',
                        data: time
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} V',
                            align: 'center'
                        }
                    },
                    series: [
                        {
                            data: vvalue,
                            type: 'line',
                            smooth: true,
                            areaStyle: {
                                color: '#56C4A5',
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            },
                            label: {
                                show: false
                            }
                        }
                    ]
                };
                this.chartInstance01.setOption(option01);
                this.chartInstance02.setOption(option02);
                this.chartInstance03.setOption(option03);
                this.chartInstance04.setOption(option04);
                this.chartInstance05.setOption(option05);
                this.chartInstance06.setOption(option06);

            },
            on() {
                this.getData();
                this.initEcharts();
            }

        },
        mounted() {
            this.getAllAddress();
            this.initEcharts();

        }
    })

</script>

</body>
</html>